<template>
  <div class="play">
    <div
      class="product_show"
      v-for="item in responseAll"
      :key="item.id"
      @click="selectDetail(item.id)"
    >
      <div class="show_img">
        <!-- <el-image
              style="width: 255px; height: 280px; border-radius: 10px"
              src="https://qn1-next.xuetangonline.com/FqgefvConAmVNbvVG6IjLUVFIhA-"
              fit="cover"
            ></el-image> -->
        <img
          referrerpolicy="no-referrer"
          :src="item.coverImage"
          style="width: 290px; height: 210px; border-radius: 10px"
        />
      </div>
      <div class="title">
        {{ item.description }}
      </div>
      <div class="last">
        <span><i class="el-icon-user-solid"></i></span>
        <span @click="routerUser(1)">说了一半的话</span>
        <span>2024-01-22</span>
      </div>
    </div>
  </div>
</template>
  
  <script>
import { onMounted } from "vue";
export default {
  name: "play",
  components: {},
  data() {
    return {
      responseAll: [],
      pageNum: 1, // 当前页码
      isLoading: false, // 是否正在加载数据
      
    };
  },
  methods: {
    // 获取全部商品
    getAllProduct() {
      let url = "/api/resources/list?pageNum=1&pageSize=10";
      this.$http.get(url).then((res) => {
        this.responseAll = res.data.rows;
        console.log(res.data.rows);
      });
    },
    selectDetail(id) {
      this.$router.push({
        path: "/play",
        query: {
          resourcesId: id,
        },
      });
    },
  },  
  mounted() {
    this.getAllProduct();
  },
};
</script>
  
  <style lang="less" scoped>
.play {
  .product_show {
    width: 286px;
    // height: 400px;
    float: left;
    margin-right: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    transition: transform 0.2s ease-in-out;
    .show_img {
      width: 286px;
      height: 210px;
      border-radius: 15px;
      margin-left: 7px;
    }
    .title {
      width: 287px;
      max-height: 48px; /* 设置最大高度来控制行数，2行的高度 */
      line-height: 24px; /* 设置行高 */
      text-align: left;
      color: #11192d;
      display: -webkit-box; /* 使元素成为伸缩盒模型 */
      font-size: 16px;
      font-weight: 600;
      margin: 8px;
      overflow: hidden; /* 隐藏超出部分 */
      text-overflow: ellipsis; /* 省略号 */
      -webkit-line-clamp: 2; /* 设置最多显示2行 */
      -webkit-box-orient: vertical; /* 设置伸缩方向为垂直 */
    }

    .last {
      width: 287px;
      height: 30px;
      margin-left: 8px;
      margin-top: -5px;
      span {
        font-size: 14px;
        color: #8a8a8a;
        margin-right: 10px;
      }
    }
  }
}
</style>